/**
语音录制组件

属性：
  tooltipPlacement：提示文本的位置
事件:
  recordAudio(duration, PCMBlob) 当语音录制完毕时触发，提供duration:录制时长和PCMBlob录音的blob
 */
<template>
  <el-tooltip
    :content="recordIn ? '发送语音' : '开始录制'"
    :placement="tooltipPlacement"
    :enterable="false"
  >
    <i
      :class="
        (!recordIn ? 'el-icon-microphone' : 'el-icon-s-promotion twinkle') +
          ' chat-tool-btn'
      "
      @click="recordAudio"
    />
  </el-tooltip>
</template>

<script>
import Recorder from "js-audio-recorder";
const recorder = new Recorder();
export default {
  model: {
    methods: ["recordAudio"],
  },
  props:{
    tooltipPlacement:{type:String,default:'top'}
  },
  data() {
    return {
      recordIn: false,
    };
  },
  methods: {
    recordAudio() {
      this.recordIn = !this.recordIn;
      if (this.recordIn) {
        recorder.start();
      } else {
        recorder.stop();
        this.$emit("recordAudio", recorder.duration, recorder.getWAVBlob());
        recorder.destroy()
      }
    },
  },
};
</script>

<style lang="less" scoped>
.chat-tool-btn {
  cursor: pointer;
  margin-right: 10px;
}
.twinkle {
  color: red;
  -webkit-animation: twinkling 1s infinite ease-in-out;
}
.animated {
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}
@-webkit-keyframes twinkling {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
</style>